<template>
  <!-- 收集器 -->
  <div class="collect">
    <input v-model="userName" class="user-name box" type="text" placeholder="用户名：666">
    <input v-model="password" class="password box" type="text" placeholder="密码：123">
    
    <!-- 功能框 -->
    <div class="functional-block">
      <div class="storage">
        <input type="checkbox">
        <span>记住密码</span>
      </div>

      <div class="back">
        <span>找回密码</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "collect",
  data() {
    return {
      userName: "",
      password: "",
      collection: {
        userName: '',
        password: '',
      },
    }
  },
  watch: {
    userName: {
      handler(newResolve, oldResolve) {
        this.collection.userName = this.userName;
      }
    },
    password: {
      handler(newResolve, oldResolve) {
        this.collection.password = this.password;
      }
    },
    collection: {
      handler(newResolve, oldResolve) {
        this.$emit("onCollection", newResolve);
      },
      deep: true,
    }
  },
  methods: {
    userError(data) {
      if(!data) {
        alert("你的账户或密码是错误的！");
      }
    }
  },
  mounted() {
    this.$bus.$on("accountAndPasswordareIncorrect", this.userError);
  },
}
</script>

<style scoped>
  .collect {
    /* background: chartreuse; */
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
  .collect .box {
    background-color: transparent;
    border: 2px solid #fff;
    display: block;
    padding: 5px;
    border-radius: 5px;
    width: 70%;
    box-sizing: border-box;
    margin: auto;
    margin-bottom: 10px;
  }
  .collect .box::-webkit-input-placeholder {
    color: #fff;
  }

  .collect .functional-block {
    /* background-color: rgb(255, 132, 0); */
    display: flex;
    justify-content: space-around;

    color: #fff;
  }
  input[type = "checkbox"] {
    width: 15px;
    height: 15px;
  }
</style>